<template>
  <div class="fixed-header fixed-footer">
    <x-header in-app-close>最近开奖</x-header>

    <list v-model="loading" :finished="finished" @load="onLoad">
      <cell class="flex-middle" :key="p.id" v-for="p in prizes" :to="'/daletou/prize?no=' + p.lotteryNo" is-link>
        <div class="text-grey mb-3">第{{p.lotteryNo}}期<i class="ml-3">{{p.endTime}}</i></div>
        <div v-html="results(p)"></div>
      </cell>
      <div v-if="finished" class="text-center text-grey py-3">没有更多了...</div>
    </list>

    <footer class="bg-white text-center p-2 bt-l">
      <a @click="jump('/daletou')" class="btn btn-danger">继续选择本彩种</a>
    </footer>
  </div>
</template>

<script>
import { List, Cell } from 'vant'
import { jump } from '../../router'
import http from '../../http'

export default {
  components: {List, Cell},
  name: 'daletou-prizes',
  data: () => ({
    finished: false,
    loading: false,
    prizes: []
  }),
  beforeRouteEnter (to, from, next) {
    http.post('/digital/daletou/prizes').then(prizes => {
      next(vm => {
        vm.prizes = prizes
      })
    })
  },
  methods: {
    onLoad () {
      var from = this.prizes[this.prizes.length - 1].lotteryNo
      this.loading = true
      http.post('/digital/daletou/prizes', {from}).then(prizes => {
        this.loading = false
        this.prizes = this.prizes.concat(prizes)
        if (prizes.length < 10) {
          this.finished = true
        }
      })
    },
    results (i) {
      var [p, a] = i.results.split('|').map(e => e.split(','))
      return p.map(e => `<b class="ball sm on mr-2">${e}</b>`).join('') + '<i class="px-1"></i>' + a.map(e => `<a class="ball sm on mr-2">${e}</a>`).join('')
    },
    jump
  }
}
</script>
